import React from 'react';
import {Modal, Form, Input, Select, Checkbox, Button} from 'antd';
import { WeaBrowser } from 'ecCom';
const FormItem = Form.Item;

import FormGroup from './base/FormGroup';

// 流程中心，数据来源
class Content_8_DataSource extends React.Component {
    state = {
        id: this.props.tabData.id,
        title: this.props.tabData.title,
        viewType: this.props.tabData.viewType || this.props.tabNew.viewType.selected,
        isComplete: this.props.tabData.isComplete || this.props.tabNew.isComplete.selected,
        showCopy: this.props.tabData.showCopy,
        showCount: this.props.tabData.showCount,
        isArrangement: this.props.tabData.isArrangement,
        isExclude: this.props.tabData.isExclude || this.props.tabNew.isExclude.selected,
        workflowSource: this.props.tabData.workflowSource,
    };

    onOk(e) {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((errors, values) => {
            if (!!errors) {
                return;
            }

            this.props.onOk(values);
        });
    }

    onCancel() {
        this.props.onCancel();
    }

    onViewTypeChange(value) {
        this.setState({
            viewType: value
        });
    }
    onChange(ids,names,datas){
        this.setState({
            workflowSource:ids
        });
        // this.props.form.setFieldsValue('workflowSource': ids);
    }
    render() {
        const {getFieldProps} = this.props.form;
        const formItemLayout = this.props.formItemLayout;
        const tabNew = this.props.tabNew;
        const viewType = this.state.viewType;
        const workflowSource = this.state.workflowSource;
        getFieldProps('id', {initialValue: this.state.id});
        const titleProps = getFieldProps('title', {
            initialValue: this.state.title,
            rules: [
                {required: true, message: '请填写标题'},
            ]
        });
        getFieldProps('workflowSource', {initialValue: workflowSource});
        const viewTypeProps = getFieldProps('viewType', {initialValue: viewType});
        const viewTypeOptions = tabNew.viewType.options.map((item, index) => {
            return <Option key={index} value={item.key}>{item.value}</Option>;
        });

        let isComplete = <span></span>;
        if (viewType == '4') {
            const isCompleteProps = getFieldProps('isComplete', {initialValue: this.state.isComplete});
            const isCompleteOptions = tabNew.isComplete.options.map((item, index) => {
                return <Option key={index} value={item.key}>{item.value}</Option>;
            });

            isComplete = (
                <Select size="default" style={{width: '100px', marginLeft: '10px'}} {...isCompleteProps}>
                    {isCompleteOptions}
                </Select>
            );
        }

        let showCopy = <span></span>;
        if (viewType == '1') {
            const showCopyProps = getFieldProps('showCopy', {initialValue: this.state.showCopy, valuePropName: 'checked'});

            showCopy = (
                <Checkbox size="default" style={{marginLeft: '10px'}} {...showCopyProps}>显示抄送事宜</Checkbox>
            );
        }
        
        let showCount = <span></span>;
        if (viewType == '1' || viewType == '2' || viewType == '3' || viewType == '4' || viewType == '5' || viewType == '10') {
            const showCountProps = getFieldProps('showCount', {initialValue: this.state.showCount, valuePropName: 'checked'});
            showCount = (
                <Checkbox size="default" style={{marginLeft: '10px'}} {...showCountProps}>显示未读数</Checkbox>
            );
        }

        let isArrangement = <span></span>;
        if (viewType == '2') {
            const isArrangementProps = getFieldProps('isArrangement', {initialValue: this.state.isArrangement, valuePropName: 'checked'});
            isArrangement = (
                <Checkbox size="default" style={{marginLeft: '10px'}} {...isArrangementProps}>显示办结事宜</Checkbox>
            );
        }


        const isExcludeProps = getFieldProps('isExclude', {initialValue: this.state.isExclude});
        
        const isExcludeOptions = tabNew.isExclude.options.map((item, index) => {
            
            return <Option key={index} value={item.key}>{item.value}</Option>;
        });
        return (
            <Modal
                title="内容设置"
                width="660px"
                wrapClassName="esetting-modal"
                visible={true}
                footer={
                    <div className="esetting-confirm">
                        <Button type="primary" onClick={this.onOk.bind(this)}>确定</Button>
                        <span>&nbsp;&nbsp;&nbsp;</span>
                        <Button type="ghost" onClick={this.onCancel.bind(this)}>取消</Button>
                    </div>
                }
                onOk={this.onOk.bind(this)}
                onCancel={this.onCancel.bind(this)}
            >
                <Form horizontal className="esetting-form">
                    <FormGroup title="设置项">
                        <FormItem label="标题" {...formItemLayout}>
                            <Input type="text" size="default" style={{width: '80%'}} {...titleProps}/>
                        </FormItem>
                        <FormItem label="查看类型" {...formItemLayout}>
                            <Select size="default" style={{width: '100px'}} {...viewTypeProps} onChange={this.onViewTypeChange.bind(this)}>
                                {viewTypeOptions}
                            </Select>
                            {isComplete}
                            {showCopy}
                            {isArrangement}
                            {showCount}
                        </FormItem>
                        <FormItem label="流程来源" {...formItemLayout}>
                            <Select size="default" style={{width: '70%'}} {...isExcludeProps} onChange={value => this.setState({isExclude: value})}>
                                {isExcludeOptions}
                            </Select>
                            <div className="portal-esetting-workflowSource" style={{width: '10%'}}>
                                { this.state.isExclude == 2 ? <div></div>
                                 : <WeaBrowser
                                        type={'-99991'}
                                        title="请选择"
                                        icon='icon-coms-portal'
                                        iconBgcolor='#1a57a0'
                                        onChange={this.onChange.bind(this)} 
                                        dataParams={{isWfTree: 1}}
                                        customized={true}
                                        isSingle={false}
                                        isMultCheckbox={true}
                                    >
                                        <button type="button" className="ant-btn ant-btn-ghost ant-btn-icon-only" style={{border:0}}><i className="anticon anticon-search"/></button>
                                    </WeaBrowser> 
                                }
                            </div>
                        </FormItem>
                    </FormGroup>
                </Form>
            </Modal>
        );
    }
}

Content_8_DataSource = Form.create()(Content_8_DataSource);

export default Content_8_DataSource;